웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
CSS 에서 자주 사용되는... 많이 활용되는 선택자 중 하나로 last-child 선택자를 들 수 있습니다. first-child와 함께 말이죠~ 마지막 요소에만 특정 스타일을 지정할 경우 last-child 선택자를 사용할 수 있습니다. 예를들어 만약 p 태그가 나열된 태그들 중 마지막에 해당하는 p태그에 스타일을 부여하려면? 아래와 같이 사용가능합니다.
p:last-child { 스타일 속성과 값; }
아래 예제를 봐주세요. 아래는 6개의 동일한 p 엘리먼트(요소) 중에서 마지막 요소만 배경색으로 붉은 색을 적용하였습니다. 다른 태그들은 적용되지 않고 오직 p태그에만 적용됩니다.
<html>
<head>
<style type="text/css">
.test {background:#f80; color: #fff; margin: 4px; width: 30px; height: 30px; display: inline-block; text-align: center; }
.test:last-child { background: #f00; }
</style>
</head>
<body>
<div>
<p class="test">1</p>
<p class="test">2</p>
<p class="test">3</p>
<p class="test">4</p>
<p class="test">5</p>
<p class="test">6</p>
</div>
</body>
</html>
*구현시 실제 화면에 나타나는 모습입니다.
; 만약 지정한 스타일 지정이 안된다면 해당하는 p태그 이외의 태그가 존재하지는 않나 살펴보세요. 다른 태그가 중간에 존재하는 경우 삭제하거나 해당하는 p태그 상위에 예제처럼 div태그를 사용해서 묶어주는 것이 좋은 습관입니다.
last-chilld 선택자는 *(별표) 기호 뒤에도 사용할 수 있습니다. 그래서 만약 * 기호 뒤에 이 선택자를 사용하면 해당하는 태그의 모든 마지막 요소들에게 스타일이 적용됩니다.
p:last-child { 스타일 속성과 값; }
#1 마지막 요소 선택자 예제보기
아래 예제를 봐주세요. 아래는 6개의 동일한 p 엘리먼트(요소) 중에서 마지막 요소만 배경색으로 붉은 색을 적용하였습니다. 다른 태그들은 적용되지 않고 오직 p태그에만 적용됩니다.
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
*구현시 실제 화면에 나타나는 모습입니다.
#2 last-child 사용시 주의할 점은 무엇일까요? !!
; 만약 지정한 스타일 지정이 안된다면 해당하는 p태그 이외의 태그가 존재하지는 않나 살펴보세요. 다른 태그가 중간에 존재하는 경우 삭제하거나 해당하는 p태그 상위에 예제처럼 div태그를 사용해서 묶어주는 것이 좋은 습관입니다.
#3 참고사항 !!
last-chilld 선택자는 *(별표) 기호 뒤에도 사용할 수 있습니다. 그래서 만약 * 기호 뒤에 이 선택자를 사용하면 해당하는 태그의 모든 마지막 요소들에게 스타일이 적용됩니다.
아래의 글도 찾고 계시지 않나요?
제이쿼리 css 메소드로 스타일 지정하기
제이쿼리 다음 엘리먼트 찾기 next() nextAll()
CSS 레인보우(rainbow) 색상의 텍스트 만들기
css 프로퍼티 pointer-events property
CSS 텍스트 선택 드래그 설정, user-select 프로퍼티
CSS animation 구현시 마지막 상태 유지하는 방법- CSS3 가상선택자 :target 알아보기
- LESS에서 ::after 및 ::before 그리고 :hover 사용하는 방법
CSS3 animation으로 carousel 만들기- css float 속성의 자식요소를 가진 엘리먼트 사용하는 팁